<template>
	<view class="car-container">
		<view v-if="!isLogin" class="car-container-login">
			<image class="" :src="src" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
			<view class="car-container-login-desc">
				登录后可同步数据
			</view>
			<view class="car-container-login-btn">
				<u-button text="去登录" shape="circle" size="normal" type="error" @click="goLogin"></u-button>
			</view>
		</view>
		<view v-else class="car-container-item">
			<u-swipe-action>
				<u-swipe-action-item v-for="(item, i) of carList" :key="item.id" :options="carOptions"
					@click="carItemBtn($event, i)">
					<view class="shop-container">
						<view class="shop-container-left">
							<view class="shop-container-left-radio">
								<radio-group>
									<radio color="red" class="container-item-radio" :checked="item.checked"
										@click="radioClickQuick">
									</radio>
								</radio-group>
							</view>
							<view class="">
								<image class="shop-container-left-img" :src="item.avatar" mode="" lazy-load="false">
								</image>
							</view>
						</view>
						<view class="shop-container-right">
							<view class="shop-container-right-title">
								{{ item.title }}
							</view>
							<view class="shop-container-right-desc">
								{{ item.spec }}
							</view>
							<view class="shop-container-right-money">
								<view class="shop-container-right-price">
									{{ item.price }}
								</view>
								<view class="shop-container-right-count">
									{{ item.count }}
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { getAvatar } from '@/api/car/car'
export default {
	data() {
		return {
			src: '',
			carList: [],
			carOptions: [{
				icon: 'trash-fill',
				style: {
					backgroundColor: '#f56c6c',
					width: '40px',
					height: '40px',
					borderRadius: '100px',
					margin: '0 6px'
				}
			}, {
				icon: 'heart-fill',
				style: {
					backgroundColor: '#5ac725',
					width: '40px',
					height: '40px',
					borderRadius: '100px',
					margin: '0 6px'
				}
			}]
		};
	},
	computed: {
		...mapGetters({
			isLogin: 'user/isLogin'
		})
	},
	mounted() {
		this.getAvatar()
	},
	onShow() {
		if (this.isLogin) {
			this.handlerGetCarList()
		}
	},
	methods: {
		...mapActions({
			getCarList: 'car/getCarList'
		}),
		async getAvatar() {
			const { avatar } = await getAvatar({ type: 'json' });
			this.src = avatar;
		},
		goLogin() {
			uni.navigateTo({
				url: '/subIndexPages/user/login'
			});
		},
		async handlerGetCarList() {
			const avatar = await this.getCarList({ type: 'json' })
			this.carList.push({
				id: 1,
				shopName: '按摩椅自营店',
				avatar,
				title: '电动按摩椅',
				price: '3333.85',
				spec: '白色,标准版,大号',
				count: 1,
				checked: false
			})
			this.carList.push({
				id: 2,
				shopName: '手机自营店',
				avatar,
				title: '手机',
				price: '3333.85',
				spec: '雅黑,128G+8G',
				count: 1,
				checked: false
			})
		},
		carItemBtn(e, value) {
			console.log(e)
			console.log(value)
		}
	}
}
</script>

<style lang="scss">
.car-container {
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 20rpx;
	box-sizing: border-box;

	&-item {
		height: 100%;
	}

	&-login {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
		color: #666;

		&-desc {
			margin-top: 20rpx;
		}

		&-btn {
			margin-top: 50rpx;
			width: 200rpx;
		}
	}

}

.shop-container {
	height: 300rpx;
	width: 100%;
	display: flex;

	&-left {
		width: 400rpx;
		display: flex;
		&-img{
			width: 150rpx;
			height: 150rpx;
		}
	}

	&-right {
		width: calc(100% - 200rpx);

		&-title {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #333;
		}

		&-desc {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #666;
		}

		&-money {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #666;
			display: flex;
			justify-content: space-between;
		}

		&-price {
			font-size: 30rpx;
			color: #f00;
		}
	}
}
</style>
